<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import {
  VxeFormPropTypes,
  VxeFormInstance,
  VxeModalInstance,
  VxeFormProps
} from "vxe-pc-ui";
import { ordertypeEdit } from "@/api/config/config";
import { taxList, contractAdd, contractDetail } from "@/api/project/project";
import {
  taxSourcesList,
  listMerchantName,
  invoiceList,
  templateAdd,
  contractEdit
} from "@/api/project/project";
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const defaultFormData = () => {
  return {
    taxSourcesId: "",
    contractTemplateName: "",
    esignTemplateId: "",
    templateState: 2,
    id: "",
    contractTemplateUrl: ""
  };
};
// 筛选相关
const formRef = ref<VxeFormInstance>();
interface FormDataVO {
  taxSourcesId: string | number; //关联税源地
  contractTemplateName: string; //模板名称
  esignTemplateId: string; //模板id
  templateState: number; //状态
  id: number | string;
  contractTemplateUrl: string;
}

const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    taxSourcesId: "",
    contractTemplateName: "",
    esignTemplateId: "",
    templateState: 2,
    id: "",
    contractTemplateUrl: ""
  },
  items: [
    {
      field: "contractTemplateName",
      title: "合同模板名称",
      span: 24,
      itemRender: {},
      slots: { default: "contractTemplateName" }
    },
    {
      field: "taxSourcesId",
      title: "关联税源地",
      span: 24,
      itemRender: {},
      slots: { default: "taxSourcesId" }
    },
    {
      field: "esignTemplateId",
      title: "模板ID",
      span: 24,
      itemRender: {},
      slots: { default: "esignTemplateId" }
    },
    {
      field: "templateState",
      title: "状态",
      span: 24,
      itemRender: {},
      slots: { default: "templateState" }
    }
  ]
});
const formRules = ref<VxeFormPropTypes.Rules>({
  taxSourcesId: [
    { required: true, message: "请选择税源地", trigger: "change" }
  ],
  contractTemplateName: [
    { required: true, message: "请输入合同模板名称", trigger: "blur" }
  ],
  esignTemplateId: [
    { required: true, message: "请输入模板ID", trigger: "blur" }
  ],
  templateState: [{ required: true, message: "请选择状态", trigger: "change" }]
});

const showAddModal = () => {
  showModal(`新增模板`);
  formOptions.data = defaultFormData();
  nextTick(() => {
    formRef.value.clearValidate();
  });
};
const showEditModal = (record: Recordable) => {
  showModal(`编辑模板`);
  nextTick(() => {
    formRef.value.clearValidate();
    contractDetail(record.id).then(res => {
      for (let key in formOptions.data) {
        if (res.data[key] === undefined || res.data[key] === null) {
        } else {
          formOptions.data[key] = res.data[key];
        }
      }
      // formOptions.data = res?.data;
    });
  });
};
const handleSubmit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) {
    if (formOptions.data.id) {
      contractEdit(formOptions.data).then(() => {
        modalOptions.modalValue = false;
        emits("reload");
      });
    } else {
      contractAdd(formOptions.data).then(() => {
        modalOptions.modalValue = false;
        emits("reload");
      });
    }
  }
};

const allList = ref<any[]>();
const getalllist = () => {
  taxList().then(res => {
    allList.value = res?.data?.rows;
  });
};
const merchantList = ref<any[]>();
const getmerchantList = () => {
  listMerchantName().then(res => {
    merchantList.value = res?.data?.rows;
  });
};
const iList = ref<any[]>();
const getinvoiceList = () => {
  invoiceList({ state: 1, taxSourcesId: formOptions.data.taxSourcesId }).then(
    res => {
      iList.value = res?.data?.rows;
      console.log(iList.value);
    }
  );
};
const merchantChange = () => {
  formOptions.data.taxSourcesId = "";
  getalllist();
};
const taxChange = () => {
  formOptions.data.invoiceTypeIdList = [];
  getinvoiceList();
};
onBeforeMount(() => {
  getalllist();
});
defineExpose({ showAddModal, showEditModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="800"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <vxe-form
        ref="formRef"
        :titleWidth="120"
        :titleAlign="`right`"
        :rules="formRules"
        v-bind="formOptions"
      >
        <template #contractTemplateName="{ data }">
          <el-input
            clearable
            placeholder="请输入合同模板名称"
            v-model="data.contractTemplateName"
          ></el-input>
        </template>
        <template #taxSourcesId="{ data }">
          <el-select
            clearable
            placeholder="请选择税源地"
            v-model="data.taxSourcesId"
            @change="taxChange"
          >
            <el-option
              v-for="(item, index) in allList"
              :key="index"
              :label="item.taxSourcesName"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template #esignTemplateId="{ data }">
          <el-input
            clearable
            placeholder="请输入模板ID"
            v-model="data.esignTemplateId"
          ></el-input>
        </template>
        <template #templateState="{ data }">
          <el-switch
            v-model="data.templateState"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
        </template>
      </vxe-form>
    </template>
    <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      />
    </template>
  </vxe-modal>
</template>
<style>
.img_one {
  position: relative;
}
.icon-check {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 48px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #eee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #eee;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
}
</style>
